/*
 * @Author: chichiksky
 * @Date: 2022-04-01 11:37:23
 * @LastEditTime: 2022-04-13 17:09:52
 * @LastEditors: your name
 * @Description: 老师设置作业页面
 * @FilePath: \web\src\router\course\courseChild\jobSettings\index.jsx
 */
import "./index.css";
import { Button, Input, Select, Radio } from "antd";
import React, { useEffect, useState } from "react";
import request from "../../../../network/index";
import Cookie from "../../../../assets/common/cookie";

const JobSettings = () => {
  const [classInfo, setClassInfo] = useState([]);
  const [classOption, setClassOption] = useState("0");
  const [radio, setRadio] = useState("1");
  const { Search } = Input;
  const { Option } = Select;

  useEffect(() => {
    getClassInfo();
  }, []);

  // 获取当前课程的班级信息
  const getClassInfo = async () => {
    const { list } = await request.get("/teacher/class");
    const _class = JSON.parse(Cookie.get("class"));
    const newList = _class.map((item) => list.filter((e) => e._id === item)[0]);
    const children = newList.map((e) => (
      <Option key={e._id}>{e.th + "-" + e.name}</Option>
    ));
    console.log("children", newList, children);
    setClassInfo([<Option key="0">全部班级</Option>, ...children]);
  };

  // 新建作业时事件
  const createJob = () => {
    console.log("createJob");
  };

  // 搜索作业
  const onSearch = () => {
    console.log("onSearch");
  };

  const children = () => {
    // 获取选择的班级届和名称
    console.log("course");
    console.log("class", classInfo);
    // const list = courseInfo2.
    // console.log('list',list);

    // return courseInfo._class.map(e => <Option key={e._id}>{e.th+'-'+e.name}</Option>)
  };
  children();
  // 选择班级事件的回调
  const handleChange = (value) => {
    setClassOption(value);
    setRadio("1");
  };

  // 选择作业对应状态的回调
  const onRadioChange = e => {
    setRadio(e.target.value)
  }

  return (
    <div id="jobSettings">
      <div className="jobSettings-head">
        <Button type="primary" onClick={createJob}>
          新建作业
        </Button>
        <Search placeholder="搜索" onSearch={onSearch} enterButton />
      </div>
      <div className="jobSettings-body">
        <div className="jobSettings-options">
          <Select
            defaultValue="0"
            style={{ width: 160 }}
            onChange={handleChange}
          >
            {classInfo}
          </Select>
          <span>状态</span>
          <Radio.Group onChange={onRadioChange} value={radio}>
            <Radio value="1">全部</Radio>
            <Radio value="2">未开始</Radio>
            <Radio value="3">进行中</Radio>
            <Radio value="4">已结束</Radio>
          </Radio.Group>
        </div>
      </div>
    </div>
  );
};

export default JobSettings;
